<!-- 显示日志的而已 -->
<template>
    <!-- 控制台 -->
    <div class="cmd" ref="terminalContainer"></div>
</template>
  
<script setup>
import { ref, reactive, onMounted } from 'vue';

const props = defineProps({
    uuid: String
});

// 组件
import "xterm/css/xterm.css";
import { Terminal } from 'xterm';
import { FitAddon } from 'xterm-addon-fit';
let { ipcRenderer } = window.electron;


const terminal = new Terminal({
    // 渲染类型
    rendererType: 'canvas',
    rows: 35,
    cols: 92,
    fontSize: 12,
    // 光标闪烁
    cursorBlink: false,
    //   是否禁用输入
    disableStdin: true,
    scrollback: 800, //回滚
    tabStopWidth: 8, //制表宽度
    cursorStyle: 'underline',
    lineWrapping: false,//禁止自动换行
    screenKeys: true,
    drawBoldTextInBrightColors: true,
    theme: {
        //   字体
        foreground: '#ffffff',
        background: '#353d44',
        // 光标
        cursor: 'help',
        lineHeight: 12,
    },
});

const fitAddon = new FitAddon();
const terminalContainer = ref(null);
terminal.loadAddon(fitAddon);
terminal.onKey(e => {
    // console.log(e);
    //ctrol+ c copy
    if (e.key == '\x03' && terminal.hasSelection()) {
        navigator.clipboard.writeText(terminal.getSelection())
    }
});

// 监听窗口大小变化
ipcRenderer.on('update-win-size', (e, data) => {
    fitAddon.fit();//调整容器适合尺寸
    terminal.scrollToBottom();//滚动到底部
});

// 监听控制台运行的日志
ipcRenderer.on('console_data', (e, key, data) => {
    if (key != props.uuid) return;
    write(data);
});


onMounted(() => {
    // 挂载到元素
    terminal.open(terminalContainer.value);
    fitAddon.fit();//调整容器适合尺寸

    // 获取日志
    window.api.getFrpLog(props.uuid).then(res => {
        write(res);
    });
});

/**
 * 写入数据
 * @param {string} data 
 */
function write(data) {
    terminal.write(data);
    terminal.scrollToBottom();//滚动到底部
}

function clear() {
    terminal.clear();//清除屏幕
}


</script>
  
<style lang="scss" scoped></style>